<template>
  <div>
    <el-button @click="insertVisibility = true">新增用户</el-button>
    <el-dialog :visible.sync="insertVisibility" title="用户新增">
      <el-form
        ref="account"
        class="account"
        :model="account"
        :rules="rules"
        label-position="right"
        label-width="120px"
      >
        <el-form-item prop="username" label="用户名：">
          <el-input v-model.trim="account.username"> </el-input>
        </el-form-item>

        <el-form-item prop="password" label="密码：">
          <el-input v-model="account.password"> </el-input>
        </el-form-item>

        <el-form-item class="buttons">
          <el-button type="primary" icon="el-icon-edit" @click="accountSubmit()"
            >提交
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => $refs.account.resetFields()"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import New from './components/New.vue';
import { auth } from "@/apis";

export default {
  name: "ManagerUser",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      insertVisibility: false,
      account: {
        username: null,
        password: null,
      },
      // rules: {
      //     username: [
      //         {required: true,   message: '请输入账号', trigger: 'blur'},
      //         {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur','change']},
      //         { validator:this.validateItem ,trigger:'blur'}
      //         ],
      //     password: [
      //         {required: true, message: '请输入密码', trigger: 'blur'},
      //         ],
      //     }

      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { validator: this.validateUsername, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    // validateItem(rule, value, callback) {
    //         // callback 在所有分支都必须运行，区别在于是否有error参数
    //         let isExits = true
    //         if (isExits) {
    //                 callback(new Error('用户名已经存在'))
    //             } else {
    //                 callback()
    //         }
    // },
    validateUsername(rule, value, callback) {

      // this.$http({
      //   method: "get",
      //   url: "/auth/userInfo/exist/" + value,
      // })
      auth.usernameExist(value)
      .then(
        (res) => {
          this.$message.success(res.data)
          if (res.data) {
            callback(new Error("用户名已经存在"));
          } else {
            callback("ok");
          }
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
    accountSubmit() {
      this.$refs.account.validate((valid) => {
        if (valid) {
         /** this.$http({
            method: "post",
            url: "/auth/userInfo/insert",
            data: this.account,
          })*/
          auth.authInsert(this.account)
          .then(
            (res) => {
              if (res.data) {
                this.$message.success("用户添加成功");
                this.insertVisibility = false;
                this.$refs.account.resetFields();
              }
            },
            (error) => {
              console.log(" request error : " + error.response.status);
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 410px;
  height: 300px;
}
</style>